<template>
  <div>
    <h3>账号列表</h3>
    <hr />
    <el-table
      :data="userinfo"
      height="600"
      ref="multipleTable"
      @selection-change="handleSelectionChange"
      >>
      <el-table-column type="selection"></el-table-column>
      <el-table-column label="账号" prop="account"></el-table-column>
      <el-table-column label="用户组" prop="userGroup"></el-table-column>
      <el-table-column label="创建时间" prop="ctime"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="curUser">
          <el-button @click="changedrawer(curUser)">编辑</el-button>
          <el-button type="danger" @click="deluserbtn(curUser)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 
      size-change   当前页显示行数变化时
      current-change    更改当前页时
      current-page    当前页显示
      page-sizes    可以选择的页数
      page-size   默认展示多少页
      layout  显示空间排列顺序及是否显示
      total：总条数
     -->
    <el-pagination
      @size-change="changesize"
      @current-change="changepage"
      :current-page="curpage"
      :page-sizes="allsizepage"
      :page-size="cursizepage"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
    <p>
      <el-button type="danger" @click="delsomeuser">批量删除</el-button>
      <el-button type="primary" @click="clearchecked">清空选择</el-button>
    </p>
    <el-drawer title="我是标题" :visible.sync="drawer" :with-header="false">
      <h4>修改用户信息</h4>
      <div class="changebox">
        <p>
          <span>用户名：</span>
          <el-input v-model="newname"></el-input>
        </p>
        <p>
          <span>用户组：</span><br />
          <el-select
            v-model="newgroup"
            placeholder="请选择"
            style="width: 100%"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </p>

        <el-button type="success" @click="changeuserbtn" style="width: 100%"
          >确认修改</el-button
        >
      </div>
    </el-drawer>
  </div>
</template>

<script>
import { getuserlist, deluser, deluserss, edituser } from "@/apis/users";

export default {
  data() {
    return {
      curpage: 1,
      allsizepage: [5, 10, 20, 50],
      cursizepage: 5,
      total: 0,
      userinfo: [],
      drawer: false,
      newname: "",
      newgroup: "",
      userid: "",
      options: [
        {
          value: "超级管理员",
          label: "超级管理员",
        },
        {
          value: "普通管理员",
          label: "普通管理员",
        },
      ],
      group: "普通管理员",
    };
  },
  created() {
    this.getlists();
  },
  methods: {
    // 获取用户列表
    getlists() {
      getuserlist({
        currentPage: this.curpage,
        pageSize: this.cursizepage,
      }).then((res) => {
        // 处理日期格式，默认时世界时间格式，通过数据
        for (const val of res.data.data) {
          let date = new Date(val.ctime);
          let newdata =
            date.getFullYear() +
            "/" +
            (date.getMonth() + 1) +
            "/" +
            date.getDate();
          val.ctime = newdata;
        }
        this.userinfo = res.data.data;
        this.total = res.data.total;
      });
    },
    // 编辑单个用户1，将值传入需要更改的区域
    changedrawer(val) {
      this.drawer = true;
      this.userid = val.row.id;
      this.newname = val.row.account;
      this.newgroup = val.row.userGroup;
    },
    // 编辑单个用户2，将值提交发送ajax
    changeuserbtn() {
      edituser({
        id: this.userid,
        account: this.newname,
        userGroup: this.newgroup,
      }).then((res) => {
        if (res.data.code == 0) {
          this.$message({
            message: "修改用户成功",
            type: "success",
          });
        } else {
          this.$message.error("修改用户失败");
        }
      });
    },
    // 删除单个用户
    deluserbtn(val) {
      deluser({ id: val.row.id }).then((res) => {
        if (res.data.code == 0) {
          this.$message({
            message: "恭喜你，删除成功",
            type: "success",
          });
          this.getlists();
        } else {
          this.$message.error("删除用户失败，请刷新页面重试");
        }
      });
    },
    // 更改每页显示数量
    changesize(newsize) {
      this.cursizepage = newsize;
      this.getlists();
    },
    // 更改当前页位置
    changepage(newpage) {
      this.curpage = newpage;
      this.getlists();
    },
    // 将选中的数据放入数组
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    //批量删除
    delsomeuser() {
      // 获取所有选中的id
      let delarr = this.multipleSelection.map((v) => {
        return v.id;
      });
      // 将数组转换为字符串
      deluserss({ ids: JSON.stringify(delarr) }).then((res) => {
        console.log(res);
        if (res.data.code == 0) {
          this.$message({
            message: "恭喜你，批量删除成功",
            type: "success",
          });
          this.getlists();
        } else {
          this.$message.error("删除失败，请刷新网页重试");
        }
      });
    },
    // 清除选择项
    clearchecked() {
      this.$refs.multipleTable.clearSelection();
    },
  },
};
</script>

<style lang="less" scoped>
section {
  display: flex;
  flex-direction: column;
}
h4 {
  text-align: center;
  padding: 20px;
}
.changebox {
  padding: 20px;
  flex: 1;
  text-align: center;

  P {
    margin: 20px 0;
    text-align: left;
  }
}
</style>